<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search-box">
			<input type="text" v-model="searchKey" placeholder="搜索公交线路" class="search-input" />
			<button class="search-btn" @tap="searchRoutes">搜索</button>
		</view>
		
		<!-- 常用线路 -->
		<view class="section">
			<view class="section-title">常用线路</view>
			<view class="route-list">
				<view class="route-item" v-for="(route, index) in frequentRoutes" :key="index" @tap="selectRoute(route)">
					<text class="route-number">{{route.number}}</text>
					<text class="route-name">{{route.name}}</text>
				</view>
			</view>
		</view>
		
		<!-- 全部线路 -->
		<view class="section">
			<view class="section-title">全部线路</view>
			<view class="route-list">
				<view class="route-card" v-for="(route, index) in allRoutes" :key="index" @tap="selectRoute(route)">
					<view class="route-header">
						<text class="route-number">{{route.number}}</text>
						<text class="route-price">￥{{route.price}}</text>
					</view>
					<view class="route-info">
						<view class="route-stations">
							<text>{{route.startStation}}</text>
							<text class="arrow">→</text>
							<text>{{route.endStation}}</text>
						</view>
						<view class="route-time">
							<text>首班：{{route.firstBus}}</text>
							<text>末班：{{route.lastBus}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKey: '',
			frequentRoutes: [
				{ number: '101', name: '火车站 → 汽车站' },
				{ number: '201', name: '大学城 → 市中心' },
				{ number: '301', name: '机场 → 火车站' }
			],
			allRoutes: [
				{
					number: '101',
					price: '2.00',
					startStation: '火车站',
					endStation: '汽车站',
					firstBus: '06:00',
					lastBus: '22:00'
				},
				{
					number: '201',
					price: '2.00',
					startStation: '大学城',
					endStation: '市中心',
					firstBus: '06:30',
					lastBus: '21:30'
				}
			]
		}
	},
	methods: {
		searchRoutes() {
			// 实现搜索功能
			console.log('搜索:', this.searchKey)
		},
		selectRoute(route) {
			uni.navigateTo({
				url: `/pages/booking/detail?number=${route.number}`
			})
		}
	}
}
</script>

<style lang="scss">
.container {
	padding: 20rpx;
}

.search-box {
	display: flex;
	padding: 20rpx;
	background: #fff;
	border-radius: 10rpx;
	margin-bottom: 30rpx;
	
	.search-input {
		flex: 1;
		height: 70rpx;
		padding: 0 20rpx;
		background: #f5f5f5;
		border-radius: 35rpx;
		margin-right: 20rpx;
	}
	
	.search-btn {
		width: 150rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background: #3cc51f;
		color: #fff;
		border-radius: 35rpx;
		font-size: 28rpx;
	}
}

.section {
	margin-bottom: 30rpx;
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
}

.route-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.route-item {
	background: #f5f5f5;
	padding: 20rpx;
	border-radius: 10rpx;
	width: calc(50% - 10rpx);
	
	.route-number {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		display: block;
	}
	
	.route-name {
		font-size: 24rpx;
		color: #666;
	}
}

.route-card {
	background: #fff;
	padding: 20rpx;
	border-radius: 10rpx;
	width: 100%;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
	
	.route-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		.route-number {
			font-size: 36rpx;
			font-weight: bold;
		}
		
		.route-price {
			color: #f56c6c;
			font-size: 32rpx;
		}
	}
	
	.route-info {
		.route-stations {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;
			
			.arrow {
				color: #999;
			}
		}
		
		.route-time {
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			color: #999;
		}
	}
}
</style> 